<script lang="ts" setup>
import { ref, computed } from 'vue'
import LoginContainer from 'src/components/LoginContainer.vue'
import { useRoute } from 'vue-router'
import { useAuthStore } from 'stores/authStore'
import { storeToRefs } from 'pinia'
import CreatorContainer from './CreatorContainer.vue'

const needFixed = computed(() =>
  ['/explore', '/concern'].includes(useRoute().path)
)
const { certified, showLoginDialog, userInfo } = storeToRefs(useAuthStore())
const showing = ref(false)

let delay = false
function closeDelay() {
  delay = false
  setTimeout(() => {
    showing.value = delay
  }, 100)
}

// TODO:退出登陆
function logout() {
  useAuthStore().removeToken()
}
</script>

<template>
  <header :class="needFixed ? 'fixed' : 'transparent'">
    <div class="logo" style="font-size: 1.8em">小橙书</div>
    <div class="right">
      <q-tabs active-color="primary">
        <q-route-tab to="/" label="首页" exact />
        <q-route-tab to="/explore" label="发现" exact />
        <q-route-tab label="创作" exact @click="showLoginDialog = true" />
      </q-tabs>
      <q-avatar
        size="50px"
        @mouseover="showing = delay = true"
        @mouseleave="closeDelay"
        style="margin-left: 10px; cursor: pointer"
        @click="showLoginDialog = true"
      >
        <img
          :src="!certified ? 'src/assets/img/offline.svg' : userInfo['avatar']"
        />
        <q-badge
          v-if="!certified"
          class="login-tip"
          floating
          color="primary"
          rounded
          label="未登录"
        />

        <q-menu
          v-else
          v-model="showing"
          @mouseenter="delay = true"
          @mouseleave="closeDelay"
          :offset="[18, 0]"
          style="box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px"
        >
          <q-list>
            <q-item clickable v-close-popup @click="logout">
              <q-item-section>退出登陆</q-item-section>
            </q-item>
          </q-list>
        </q-menu>
      </q-avatar>
    </div>
  </header>

  <q-dialog v-model="showLoginDialog">
    <q-card class="card">
      <q-card-section class="row items-center q-pb-none">
        <q-space />
        <q-btn
          icon="close"
          text-color="primary"
          flat
          round
          dense
          v-close-popup
        />
      </q-card-section>
      <LoginContainer v-if="!certified" />
      <CreatorContainer v-else />
    </q-card>
  </q-dialog>
</template>

<style scoped lang="scss">
header {
  @include flex($content: space-between);

  height: 72px;
  width: 100%;
  min-width: 960px;
  padding: 0 80px;
  z-index: 10;

  &.fixed {
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(255, 255, 255, 0.9);
    // border-bottom: 0.5px solid #fff;
    backdrop-filter: blur(25px);
  }

  &.transparent {
    position: absolute;
    left: 0;
    top: 0;
  }
}

.right {
  display: flex;
}

.login-tip {
  position: absolute;
  left: 25px;
  top: -2px;
  width: 48px;
}
</style>
